<include file="Common/header" />
<title>房间状态管理</title>
</head>
<body>
<nav class="breadcrumb">
    <i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 房态管理
    <span class="c-gray en">&gt;</span> 房间状态管理
    <a class="btn btn-success radius r mr-20" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" >
        <i class="Hui-iconfont">&#xe68f;</i>
    </a>
</nav>
<div class="pd-20">
    <div class="panel">
        <div class="panel-body">
            <div class="row">
                <div class="col-xs-12"> &nbsp;所属分店：
                    <span class="select-box radius " style="width: 180px;">
			    	    <select class="select" size="1" name="branch" id="branch">
				        	<option value="0">重庆嘛嘛公寓</option>
				    	    <option value="2">重庆嘛嘛公寓</option>
				    	    <option value="1">重庆嘛嘛公寓</option>
				        </select>
		    	    </span>
                </div>
                <div class="col-xs-12"> &nbsp;所在地区：
                    <span class="select-box radius " style="width: 180px;">
				     <select class="select" size="1" name="region" id="region">
				    	    <option value="0">重庆—渝北区</option>
				    	    <option value="2">重庆—渝北区</option>
				    	    <option value="1">重庆—渝北区</option>
			    	    </select>
			        </span>
                </div>
                <div class="col-xs-12"> &nbsp;所属小区：
                    <span class="select-box radius " style="width: 180px;">
				        <select class="select" size="1" name="community" id="community">
					     <option value="0">重庆嘛嘛公寓一号</option>
					     <option value="2">重庆嘛嘛公寓一号</option>
					    <option value="1">重庆嘛嘛公寓一号</option>
				        </select>
			        </span>
                </div>
                <div class="col-xs-12">
                    <a href="javascript:;" class="btn btn-success radius querys" style="margin-left: 20px"><i class="Hui-iconfont">&#xe709;</i> 查询</a>
                </div>
                <div class="col-xs-12">
                    <a href="javascript:;" class="btn radius btn-primary querys" style="margin-left: 20px;" onclick=window.location.href='{:U("Roomstatus/state")}'>返回当日房态</a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="pd-20">
    <table class="table table-border table-bordered">
        <tr>
            <td class="text-c" style="background-color: #e6e6e6;height: 30px;width:50px;"><span class="btn btn-default text-c"style="font-size: 25px;padding-top: 5px;"><i class="Hui-iconfont">&#xe67d;</i></span></td>
            <td class="text-c" style="background-color: #e6e6e6;height: 30px;width:50px;"><span class="btn btn-default text-c"style="margin-top: -10px;"><p><b>03-1</b></p>剩1间</span></td>
            <td class="text-c" style="background-color: #e6e6e6;height: 30px;width:50px;"><span class="btn btn-default text-c"style="margin-top: -10px;"><p><b>03-2</b></p>剩1间</span></td>
            <td class="text-c" style="background-color: #f37b1d;height: 30px;width:50px;"><span class="btn btn-warning text-c"style="margin-top: -10px;"><p><b>03-3</b></p>剩1间</span></td>
            <?php for($i=0;$i<12;$i++){?>
            <td class="text-c" style="background-color: #e6e6e6;height: 30px;width:50px;"><span class="btn btn-default text-c"style="margin-top: -10px;"><p><b>03-<?php echo $i+4?></b></p>剩1间</span></td>
            <?php }?>
            <td class="text-c" style="background-color: #e6e6e6;height: 30px;width:50px;"><span class="btn btn-default text-c"style="font-size: 25px;padding-top: 5px;"><i class="Hui-iconfont">&#xe63d;</i></span></td>
        </tr>
        <tr>
            <td>301</td>
            <td colspan="5" style="background-color: #d8c707;color: white" class="rz">已入住</td>
            <td style="background-color: #cd180d;color: white" class="wf">维护</td>
            <td></td>
            <td colspan="4" style="background-color: #780bac;color: white" class="yy">已预约</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>302</td>
            <td style="background-color: #5eb95e;color: white">空闲</td>
            <td style="background-color: #5eb95e;color: white">空闲</td>
            <td style="background-color: #5eb95e;color: white">空闲</td>
            <td style="background-color: #5eb95e;color: white">空闲</td>
            <td></td>
            <td></td>
            <td colspan="1" style="background-color: #d8c707;color: white"class="rz">已入住</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>303</td>
            <td style="background-color: #5eb95e;color: white">空闲</td>
            <td style="background-color: #5eb95e;color: white">空闲</td>
            <td style="background-color: #5eb95e;color: white">空闲</td>
            <td style="background-color: #5eb95e;color: white">空闲</td>
            <td colspan="3" style="background-color: #780bac;color: white"class="yy">已预约</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>304</td>
            <td style="background-color: #2b4cb4;color: white"class="zf">脏房</td>
            <td style="background-color: #5eb95e;color: white">空闲</td>
            <td style="background-color: #5eb95e;color: white">空闲</td>
            <td style="background-color: #2b4cb4;color: white"class="zf">脏房</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td colspan="3" style="background-color: #780bac;color: white"class="yy">已预约</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    <div style="position: absolute;right: 20px;top:132px;display:none" class="ry">
        <div class="panel panel-default" style="width: 300px;">
            <div class="panel-header text-c" style="background-color: #6262c3;color: white">会员信息601<a  style="color: white;float: right;"class="del"><i class="Hui-iconfont">&#xe60b;</i></a></div>
            <div class="panel-body">
                <table class="table" style="border-bottom: 1px solid #e6e6e6;">
                    <tr>
                        <td><i class="Hui-iconfont">&#xe60d;</i></td>
                        <td class="text-l">尼古拉斯</td>
                        <td><i class="Hui-iconfont">&#xe6c7;</i></td>
                        <td class="text-l">15823415962</td>
                    </tr>
                    <tr>
                        <td><i class="Hui-iconfont">&#xe602;</i></td>
                        <td colspan="3"class="text-l">500382199912126363</td>
                    </tr>
                </table>
                <table class="table" style="border-bottom: 1px solid #e6e6e6;">
                    <tr>
                        <td><i class="Hui-iconfont">&#xe60d;</i></td>
                        <td class="text-l">尼古拉斯</td>
                        <td><i class="Hui-iconfont">&#xe6c7;</i></td>
                        <td class="text-l">15823415962</td>
                    </tr>
                    <tr >
                        <td><i class="Hui-iconfont">&#xe602;</i></td>
                        <td colspan="3"class="text-l">500382199912126363</td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="panel panel-default" style="width: 300px;">

            <div class="panel-header text-c" style="background-color: #d8c707;color: white">续租/收费</div>
            <div class="panel-body">
                <table>
                    <tr>
                        <td class="text-r" height="30px">单价：</td>
                        <td>150.00</td>
                        <td class="text-r">出租类型：</td>
                        <td>直租</td>
                    </tr>
                    <tr>
                        <td class="text-r" height="30px">类型：</td>
                        <td>日租</td>
                        <td class="text-r">房东：</td>
                        <td>赵四</td>
                    </tr>
                    <tr>
                        <td class="text-r" height="40px">开始时间：</td>
                        <td colspan="3"><input class="input-text radius" id="start_time" name="start_time"/></td>
                    </tr>
                    <tr style="border-bottom: 1px dotted #e6e6e6">
                        <td class="text-r" height="40px">结束时间：</td>
                        <td colspan="3"><input class="input-text radius" id="end_time" name="end_time"/></td>
                    </tr>
                    <tr>
                        <td class="text-r" height="40px">优惠金额：</td>
                        <td colspan="3"><input class="input-text radius" id="discount" name="discount"/></td>
                    </tr>
                    <tr>
                        <td class="text-r" height="40px">总金额：</td>
                        <td colspan="3"><input class="input-text radius" id="total" name="total"/></td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="panel panel-default" style="width: 300px;">
            <div class="panel-header text-c" style="background-color: #54b018;color: white">最近缴费</div>
            <div class="panel-body">
                <table class="table" style="border: 1px dotted #e6e6e6;">
                    <tr >
                        <th>No.</th>
                        <th>类型</th>
                        <th>金额</th>
                        <th>收费时间</th>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>日租</td>
                        <td>600.00</td>
                        <td>2018-03-16 17:01</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>日租</td>
                        <td>600.00</td>
                        <td>2018-03-16 17:01</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>押金</td>
                        <td>600.00</td>
                        <td>2018-03-16 17:01</td>
                    </tr>
                </table>
            </div>
        </div>
        <div style="background-color: #e6e6e6;padding: 10px" class="text-c">
            <input class="btn radius btn-warning" type="button" value="续租/收缴">
            <input class="btn btn-danger radius" type="button" value="立即退房">
        </div>
    </div>

    <div style="position: absolute;right: 20px;top:132px;display:none" class="wz">
        <div class="panel panel-default" style="width: 300px;">
            <div class="panel-header text-c" id="t_color" style="background-color: rgba(236,0,0,0.66);color: white"><b id="tt">维护原因</b><a style="color: white;float: right;" class="dele"><i class="Hui-iconfont">&#xe60b;</i></a></div>
            <div class="panel-body">
                <p>客户电话上报，房间空调不制冷，卧室大灯不亮，水龙头漏水，需要立即处理。已上报至工程部门；</p>
            </div>
        </div>
        <div class="panel panel-default" style="width: 300px;">
            <div class="panel-header text-c" style="background-color: rgba(84,176,24,0.66);color: white">处理进度</div>
            <div class="panel-body">
                <table class="table">
                    <tr style="border-bottom: 1px dotted #e6e6e6">
                        <td>
                            <div class="round text-c" style="background-color: #93c4ee;color:white;width: 40px;height: 30px;padding-top: 10px;">管家</div>
                        </td>
                        <td>
                            <p>2018-03-20 18:10</p>
                            管家(小张)提交维护申请
                        </td >
                    </tr>
                    <tr style="border-bottom: 1px dotted #e6e6e6">
                        <td>
                            <div class="round text-c" style="background-color: #780bac;color:white;width: 40px;height: 30px;padding-top: 10px;">工程</div>
                        </td>
                        <td>
                            <p>2018-03-20 18:10</p>
                            工程(老王)接受任务，奔赴现场！
                        </td >
                    </tr>
                    <tr style="border-bottom: 1px dotted #e6e6e6">
                        <td>
                            <div class="round text-c" style="background-color: #780bac;color:white;width: 40px;height: 30px;padding-top: 10px;">工程</div>
                        </td>
                        <td>
                            <p>2018-03-20 18:10</p>
                            工程(老王)已到达现场！
                        </td >
                    </tr>
                    <tr>
                        <td>
                            <div class="round text-c" style="background-color: #780bac;color:white;width: 40px;height: 30px;padding-top: 10px;">工程</div>
                        </td>
                        <td>
                            <p>2018-03-20 18:10</p>
                            工程(老王)处理完成！
                        </td >
                    </tr>
                </table>
            </div>
        </div>
        <div style="background-color: #e6e6e6;padding: 10px" class="text-c">
            <input class="btn radius btn-success" type="button" value="恢复">
            <input class="btn btn-warning radius" type="button" value="撤销">
        </div>
    </div>
</div>

</body>
<script>
    $(document).ready(function(e) {
        $(".rz").click(function(e) {
                $(".ry").show();
        });
        $(".yy").click(function(e) {
            $(".ry").show();
        });
        $(".del").click(function(e) {
            $(".ry").hide();
        });
        $(".wf").click(function(e) {
            document.getElementById('tt').innerHTML="维护原因";
            document.getElementById("t_color").style.backgroundColor="rgba(236,0,0,0.66)";
            $(".wz").show();
        });
        $(".zf").click(function(e) {
            document.getElementById('tt').innerHTML="脏房原因";
            document.getElementById("t_color").style.backgroundColor="#2b4cb4";
            $(".wz").show();
        });
        $(".dele").click(function(e) {
            $(".wz").hide();
        });
    });
</script>
</html>